<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src='../../node_modules/jquery/dist/jquery.js'></script>
<link href='../../dist/fullcalendar.css' rel='stylesheet' />
<link href='../src/timeline/timeline.css' rel='stylesheet' />
<style>

  .fc-icon {
    clear: left;
    float: left;
    margin-bottom: .1em;
    border: 5px solid #fff;
    color: #000;
    background: #fff;
  }

  .inverse .fc-icon {
    color: #fff;
    background: #000;
  }

  .bordered .fc-icon {
    border-color: #666;
  }

  td {
    vertical-align: top;
    padding: 10px 25px;
  }

</style>
<script>

  $(function() {
    var fontSizes = [ '50px', '26px', '16px', '14px' ];
    var td = $('td');
    var i;

    for (i = 1; i < fontSizes.length; i++) {
      td.after(td.clone());
    }

    $('td').each(function(i) {
      $(this).css('font-size', fontSizes[i]);
    });

    $(document)
      .on('click', function() {
        $('body').toggleClass('inverse');
      })
      .on('mousedown', function() {
        return false; // prevent native text selection
      });

    $('td').on('click', function() {
      $(this).toggleClass('bordered');
      return false; // prevent native text selection
    });
  });

</script>
</head>
<body>
<table><tr><td>

  <span class='fc-icon fc-icon-chevron-left'></span>
  <span class='fc-icon fc-icon-chevron-right'></span>
  <span class='fc-icon fc-icon-chevrons-left'></span>
  <span class='fc-icon fc-icon-chevrons-right'></span>
  <span class='fc-icon fc-icon-plus-square'></span>
  <span class='fc-icon fc-icon-minus-square'></span>
  <span class='fc-icon fc-icon-x'></span>

</td></tr></table>
</body>
</html>
